import { createRouter, createWebHistory } from 'vue-router';  // 导入创建路由器和历史记录模式的函数
import Home from '@/views/Home.vue';  // 导入Home组件
import UserProfile from '@/views/UserProfile.vue';  // 导入UserProfile组件
import FoodDetail from '@/views/FoodDetail.vue';  // 导入FoodDetail组件
import Login from '@/views/Login.vue';  // 导入Login组件
import Register from '@/views/Register.vue';  // 导入Register组件
import AddFood from '@/views/AddFood.vue';  // 导入AddFood组件
import store from '@/store';  // 导入Vuex存储

// 定义路由
const routes = [
  {
    path: '/',  // 根路径
    name: 'Home',  // 路由名称
    component: Home,  // 组件
  },
  {
    path: '/user-profile',  // 用户资料路径
    name: 'UserProfile',  // 路由名称
    component: UserProfile,  // 组件
    meta: { requiresAuth: true },  // 需要身份验证的元信息
  },
  {
    path: '/food/:id',  // 食物详情路径，包含食物ID
    name: 'FoodDetail',  // 路由名称
    component: FoodDetail,  // 组件
  },
  {
    path: '/login',  // 登录路径
    name: 'Login',  // 路由名称
    component: Login,  // 组件
  },
  {
    path: '/register',  // 注册路径
    name: 'Register',  // 路由名称
    component: Register,  // 组件
  },
  {
    path: '/add-food',  // 添加美食路径
    name: 'AddFood',  // 路由名称
    component: AddFood,  // 组件
    meta: { requiresAuth: true },  // 需要身份验证的元信息
  },
];

// 创建路由器实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),  // 使用HTML5历史记录模式
  routes,  // 路由定义
});

// 全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {  // 如果目标路由需要身份验证
    if (!store.state.user) {  // 如果用户未登录
      next({
        path: '/login',  // 跳转到登录页面
        query: { redirect: to.fullPath },  // 携带重定向查询参数
      });
    } else {
      next();  // 已登录，继续导航
    }
  } else {
    next();  // 不需要身份验证，继续导航
  }
});

export default router;  // 导出路由器实例
